<template>
	<div class="spc-container">
		<el-row style="display: flex;align-items: flex-end;">
			<el-col :span="8" class="flex-start-center">
				<legend-box gap="4px" :machine-state-list="ruleForm.stateList || []"></legend-box>
			</el-col>
			<el-col :span="8">
				<div class="flex-center header-box" style="flex-direction: column;justify-content: flex-end;">
					<div class="header-first-box">
						<div class="header-box-name">细纱机台</div>
						<div class="header-box-val">{{ ruleForm.totalMachineNum || 0 }}</div>
					</div>
					<div class="header-second-box">
						<div class="header-second-box-item">
							<div class="header-box-name">当班总产量(kg)</div>
							<div class="header-box-val">{{ ruleForm.shiftTotalQty || 0 }}</div>
						</div>
						<div class="header-second-box-item">
							<div class="header-box-name">当班总能耗(kw·h)</div>
							<div class="header-box-val">{{ ruleForm.shiftTotalEnergy || 0 }}</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="8" class="flex-end-center margin-bottom-4">
				<div class="current-time">{{ currentTime }}</div>
				<jk-full-screen-button v-if="fromPage !== 'largeScreen'" class-name="spc-container"></jk-full-screen-button>
			</el-col>
		</el-row>
		<div class="machine-list-box">
			<!--表头-->
			<div ref="otherContainer" class="table-head-box">
				<div
					v-for="(headerItem, headerIndex) in tableHeader || []"
					:key="headerIndex"
					class="header-item"
					:style="{
						height: headerItem.height
					}"
				>
					<div style="" class="flex-center machine-name">{{ headerItem.title }}</div>
				</div>
			</div>
			<!--表体-->
			<div
				ref="scrollContainer"
				class="table-body-box"
				@scroll="handleScroll"
			>
				<div
					v-for="(machineItem, machineIndex) in ruleForm.machineList || []"
					:key="machineIndex"
					class="machine-item"
				>
					<div
						v-for="(headerItem, headerIndex) in tableHeader || []"
						:key="headerIndex"
						:style="{
							height: headerItem.height
						}"
						class="machine-item-col"
					>
						<span
							v-if="headerItem.key === 'machineStatus'"
							:style="{
								color: ruleForm.stateList.find(x => x.state === machineItem.machineStatus) ? ruleForm.stateList.find(x => x.state === machineItem.machineStatus).color : ''
							}"
						>{{ ruleForm.stateList.find(x => x.state === machineItem.machineStatus) ? ruleForm.stateList.find(x => x.state === machineItem.machineStatus).name : '' }}</span>
						<div
							v-else-if="headerItem.key === 'machineName'"
							class="flex-center"
							:class="[
								[2, 3, 4].includes(machineItem.machineStatus) ? 'machine-ani' : ''
							]"
						>
							<div
								class="machine-state-bar"
								:style="{
									background: ruleForm.stateList.find(x => x.state === machineItem.machineStatus) ? ruleForm.stateList.find(x => x.state === machineItem.machineStatus).color : ''
								}"
							></div>
							<span>{{ machineItem.machineName }}</span>
						</div>
						<div
							v-else-if="headerItem.key === 'machineMonitoringParams'"
							style="height: 100%;align-items: flex-start;justify-content: flex-start;width: 100%;padding: 0 8px;"
						>
							<div
								v-for="(paramItem, paramIndex) in machineItem.machineMonitoringParams || []"
								:key="paramIndex"
								style="font-size: 16px;white-space: nowrap;margin: 6px 0;width: 100%;"
							>
								<div style="" class="flex-between-center width-100-percent">
									<span>{{ paramIndex + 1 }}.{{ setLabel(paramItem) }}</span>
									<span>{{ paramItem.currentValue || '无' }}</span>
								</div>
							</div>
						</div>
						<div v-else-if="headerItem.key === 'percentage'" class="flex-center">
							<jk-progress class="item-gap" :show-text="false" :show-custom-text="false" :custom-text-style="{fontSize: '12px'}" :stroke-width="6" type="circle" color="#19be6b" :width="38" :percentage="machineItem.percentage || 0"></jk-progress>
							{{ machineItem.percentage }}%
						</div>
						<span v-else>{{ machineItem[headerItem.key] }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import legendBox from '../../../workshopMachineAndEnvironmentMonitor/components/legend-box';
    import { machineStateList } from '../../../../../utils/jk/status-option-list';
    import { reportMachineProcessList } from '../../../../../api/production/productionMonitor';
    import { formatTime } from '../../../../../utils/jk/jk-tool';
    import jkProgress from '../../../../jk-components/jk-progress';

    export default {
        components: {
            jkProgress,
            legendBox
        },
        props: {
            fromPage: {
                type: String,
                default: ''
            },
            killTimer: {
                type: [Number, String],
                default: ''
            }
        },
        data() {
            return {
                tableHeader: [
                    { key: 'machineName', title: '机台', height: '52px', align: 'center' },
                    { key: 'productName', title: '品种', height: '52px', align: 'center' },
                    { key: 'batchCode', title: '批号', height: '52px', align: 'center' },
                    { key: 'percentage', title: '订单进度', height: '52px', align: 'center' },
                    { key: 'machineStatus', title: '机台状态', height: '52px', align: 'center' },
                    { key: 'shiftOutputKg', title: '当班产量(kg)', height: '52px', align: 'center' },
                    { key: 'stopCount', title: '停机次数', height: '52px', align: 'center' },
                    { key: 'stopMinute', title: '停机时长(分钟)', height: '52px', align: 'center' },
                    { key: 'machineMonitoringParams', title: '生产数据', height: '340px', align: 'center' },
                    { key: 'stopCount2', title: '上一次保养日期', height: '52px', align: 'center' },
                    { key: 'stopCount3', title: '下次保养日期', height: '52px', align: 'center' }

                ],
                machineStateList: machineStateList,
                ruleForm: {
                    totalMachineNum: 0, // 总机台数
                    shiftTotalQty: 0, // 当班总产量kg
                    shiftTotalEnergy: 0, // 当班总能耗
                    processName: '',
                    stateList: [],
                    machineList: []
                },
                currentTime: '',
                timer: {},
                timer2: {},
                timer3: {}
            };
        },
        methods: {
            handleScroll(event) {
                const otherContainer = this.$refs.otherContainer;
                if (otherContainer) {
                    otherContainer.scrollTop = event.target.scrollTop;
                    otherContainer.scrollLeft = event.target.scrollLeft;
                }
            },
            setLabel(item) {
                let str = '';
                str = item.typeName || item.signalName;
                if (item.unit) {
                    str += `(${item.unit})`;
                }
                str += `:`;
                return str;
            },
            getListRequest() {
                return reportMachineProcessList({
                    processCode: 'XS'
                }).then(res => {
                    if (res.data.status === 200) {
                        this.runScroll();
                        this.ruleForm = res.data.res || {};
                    }
                });
            },
            getCurrentTime() {
                this.currentTime = formatTime(Date.now());
                this.timer = setInterval(() => {
                    this.currentTime = formatTime(Date.now());
                }, 1000);
            },
            scrollTo(e) {
                this.$refs.scrollContainer.scrollLeft = e;
            },
            runScroll() {
                clearInterval(this.timer3);
                this.timer3 = setInterval(() => {
                    if (this.$refs.scrollContainer) {
                        if (this.$refs.scrollContainer.scrollWidth > this.$refs.scrollContainer.clientWidth) {
                            const scrollContainer = this.$refs.scrollContainer;
                            if (scrollContainer) {
                                if (this.$refs.scrollContainer.scrollWidth - this.$refs.scrollContainer.scrollLeft > scrollContainer.clientWidth) {
                                    this.$refs.scrollContainer.scrollLeft += 1;
                                } else {
                                    this.$refs.scrollContainer.scrollLeft = 0;
                                }
                            }
                        }
                    }
                }, 20);
            },
            clearTime() {
                clearInterval(this.timer);
                clearInterval(this.timer2);
                clearInterval(this.timer3);
            },
            run() {
                this.getListRequest();
                this.timer2 = setInterval(() => {
                    this.getListRequest();
                }, 1000 * 5);
            }
        },
        mounted() {
            this.getCurrentTime();
            this.run();
        },
        watch: {
            killTimer() {
                this.clearTime();
            }
        },
        destroyed() {
            this.clearTime();
        },
        beforeRouteEnter(to, from, next) {
            next((_this) => {
                _this.getCurrentTime();
                _this.getDependentData();
            });
        },
        beforeRouteLeave(to, from, next) {
            this.clearTime();
            next();
        }
    };
</script>
<style scoped lang="scss">
@import "./index";
</style>
